<template>
	<!-- 每个页面顶部的概览统计 -->
	
	<view>
		<u-row style="margin-top: 30rpx;">
			<u-col :span="12" class="my-sub-title" style="text-align: center;">
					{{ filter_time }}
					<u-icon 
						name="arrow-down" 
						@click="filter_timer_show = true"
						
						>
					</u-icon>
			</u-col>
		</u-row>
		
		<!-- 时间过滤选择 -->
		<u-picker
			mode="time" 
			v-model="filter_timer_show" 
			:params="time_params" 
			@confirm="filterTimeConfirm">
		</u-picker>
		
		<u-row style="margin-top: 30rpx;">
			<u-col :span="4">
				<view class="flex-col" style="color: #39B54A;">
					<view class="numeric">{{ normal }}</view>
					<view class="desc">正常</view>
				</view>
			</u-col>
			
			<u-col :span="4">
				<view class="flex-col" style="color: #ffaa00;">
					<view class="numeric">{{ abnormal }}</view>
					<view class="desc">异常</view>
				</view>
			</u-col>
			
			<u-col :span="4">
				<view class="flex-col" style="color: #d11e21;">
					<view class="numeric">{{ unfinished }}</view>
					<view class="desc">未打卡</view>
				</view>
			</u-col>
		</u-row>		
	</view>
</template>

<script>
	export default {
		// ft 即为filter_time的缩写 由页面传入 页面默认会传入当天的日期
		// 在mounted方法中赋给filter_time变量
		// 页面重定向根据filter_time来刷新当前页面的数据
		// 这么做是为了防止子组件中修改父组件传入的参数的值 发生mutation
		props: {
			ft: String,
			overviewDeptId: Number
		},
		mounted() {
			console.log('目前的筛选时间是：', this.ft)
			this.filter_time = this.ft
			this.setData()
			
		},
		watch: {
			overviewDeptId: function(newVal) {
				console.log('new dept in overview', newVal)
				this.setData()
			}
		},
		computed: {
			normal: function () {
				return this.simpleInfo.clockedNumber - this.simpleInfo.exceptionNumber
			},
			
			abnormal: function() {
				return this.simpleInfo.exceptionNumber
			},
			
			unfinished: function() {
				return this.simpleInfo.totalNumber - this.simpleInfo.clockedNumber
			}
		},
		methods:{
			setData() {
				this.$u.api.getDeptSimpleInfo({
					date: this.filter_time,
					deptId: this.overviewDeptId
				}).then(res => {
					this.simpleInfo = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			
			filterTimeConfirm(e) {
				this.filter_time = e.year + '-' + e.month + '-' + e.day
				this.setData()
				this.$emit('filter_change', this.filter_time)
			}
			
		},
		data() {
			return {
				filter_timer_show: false,
				filter_time: '过滤时间选择',
				simpleInfo:{},
				
				time_params: {
					year: true,
					month: true,
					day: true,
					// hour: true,
					// minute: true,
					// second: false
									
				},
			}
		},
	}
</script>

<style scoped>
	.flex-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.numeric {
		font-weight: 600;
		font-size: 15px;
	}
	
	.desc {
		font-weight: 700;
		font-size: 11px;
	}
</style>
